<template>

	<view class="shop-list">
		<!-- {{keyword}} -->
		<view class="shop-tittle f-color">
			<!-- 排序选项 -->
			<view class="shop-item" v-for="(item,index) in shopList.data" :key="index" @click="changeTab(index)">
				<view :class="shopList.currentIndex==index?'active-color':''">{{item.name}}</view>
				<view class="shop-icon">
					<view class="icon iconfont icon-shangjiantou up" :class="item.status==1?'active-color':''"></view>
					<view class="icon iconfont icon-xiajiantou down" :class="item.status==2?'active-color':''"></view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<CommodityList :data="dataList"></CommodityList>
	</view>

</template>

<script>
	import commodityList from "@/components/common/commodityList.vue"
	export default {
		components: {
			CommodityList: commodityList
		},
		props:{
			keyword:String,
		},
		data() {
			return {
				shopList: {
					currentIndex: 0,
					data: [{
							name: '价格',
							status: 1,
							key:'price_new'
						},
						{
							name: '折扣',
							status: 0,
							key:'discount'
						},
						// {
						// 	name: '品牌',
						// 	status: 0
						// }
					]
				},
				dataList: []
			}
		},
		mounted() {
			this.getData();
		},
		computed:{
			// 获取排序方式
			orderBy(){
				// 获取当前排序方式对象
				let obj = this.shopList.data[this.shopList.currentIndex];
				let val = obj.status == 1 ? "desc":"asc";
				// console.log([obj.key] : val);
				return {
					[obj.key] : val
				}
			}
		},
		methods: {
			// 切换排序方法
			changeTab(index) {
				// 原始索引
				let cIndex = this.shopList.currentIndex;
				// 若点击的是当前索引，则修改箭头
				if (cIndex == index) {
					this.shopList.data[index].status = this.shopList.data[index].status == 1 ? 2 : 1;
					this.getData();
				} else {
					// 若点击的不是当前索引，则修改索引并设置箭头状态值置为1
					this.shopList.currentIndex = index;
					// 将原始索引的箭头状态值置为0
					this.shopList.data[cIndex].status = 0
					// 将当前点击的索引的箭头状态值置为1
					this.shopList.data[index].status = 1;
					this.getData();
				}
			},
			// 请求数据
			getData(){
				// console.log(...this.orderBy);
				this.$http.request({
					url:'/goods/search',
					data:{
						name:this.keyword,
						// price_new:"desc"
						...this.orderBy
					}
				}).then((res)=>{
					// console.log(JSON.stringify(res));
					// console.log(res);
					this.dataList=res;
				}).catch(()=>{
					uni.showToast({title: '获取数据失败'})
				})
			}
		}
	}
</script>

<style>
	.line {
		width: 100%;
		height: 2rpx;
		background-color: #efefef;
	}

	.shop-tittle {
		display: flex;
	}

	.shop-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}

	.shop-icon {
		position: relative;
		margin-left: 4rpx;
	}

	.iconfont {
		width: 16rpx;
		height: 8rpx;
		position: absolute;
		left: 0;
	}

	.up {
		top: -34rpx;
	}

	.down {
		top: -24rpx;
	}

	.active-color {
		color: #000000;
		font-weight: bold;
	}
</style>
